<template>
    <div class="container">
        <ul class="guide">
            <li v-for="detail in details" :key="detail.id" :style="liHeight">
                <!-- query传参，模板字符串写法 -->
                <!-- <router-link
        :to="`/home/message/detail?id=${detail.id}&title=${detail.title}`"
      >
        {{ detail.title }}
      </router-link> -->

                <!-- query传参，对象写法 -->
                <!-- <router-link
        :to="{
          path: '/home/message/detail',
          query: {
            id: detail.id,
            title: detail.title,
          },
        }"
      >
        {{ detail.title }}
      </router-link> -->

                <!-- params传参，模板字符串写法 -->
                <!-- <router-link
        :to="`/home/message/detail/${detail.id}/${detail.title}`"
      >
        {{ detail.title }}
      </router-link> -->

                <!-- params传参，对象写法 -->
                <router-link
                    :to="{
                        name: 'detail',
                        params: {
                            id: detail.id,
                            title: detail.title,
                        },
                    }"
                >
                    {{ detail.title }}
                </router-link>
                <button @click="pushShow(detail)">push</button>
                <button @click="replaceShow(detail)">replace</button>
                <button @click="goShow(detail)">go</button>
            </li>
        </ul>
        <router-view class="content"></router-view>
    </div>
</template>

<script>
import Detail from "./Detail.vue";
export default {
    name: "Message",
    data() {
        return {
            details: [
                { id: 1, title: "消息001" },
                { id: 2, title: "消息002" },
                { id: 3, title: "消息003" },
            ],
        };
    },
    components: {
        Detail,
    },
    computed: {
        liHeight() {
            return {
                height: 100 / this.details.length + "%",
            };
        },
    },
    methods: {
        pushShow(detail) {
            this.$router.push({
                name: "detail",
                params: {
                    id: detail.id,
                    title: detail.title,
                },
            });
        },
        replaceShow(detail) {
            this.$router.replace({
                name: "detail",
                params: {
                    id: detail.id,
                    title: detail.title,
                },
            });
        },
        goShow(detail) {
            this.$router.go(-detail.id);
        },
    },
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.guide {
    height: 100%;
    width: 30%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    list-style: none;
}

.guide li a {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-top: 0.1px solid rgb(56, 39, 39);
}

.content {
    width: 70%;
    height: 100%;
}
</style>
